<template>
  <h1>{{ time }}</h1>
  <h2>{{count}}</h2>
  <h2 v-for="item in date" :key="item.id">{{item}}</h2>
  <button type="button" @click="count">count ++</button>
  <button type="button" @click="count--">count--</button>
  <button type="button" @click="Click">Click</button>
</template>
<script setup lang="ts">
import { ref, onMounted,watch,reactive,onUpdated } from 'vue'

defineProps<{ msg: string }>()
//ref包装器，可以用watch 直接去监听
const count = ref(1)
watch(count,(val,oldval)=>{
  console.log('count变了',val)
})
onMounted(()=>{
  console.log(this);
  console.log(time);
//   setInterval(()=>{
//   time
//   console.log('123')
// },3000)
  
})
const time = reactive({a:new Date()})

// setInterval(()=>{
//   tiem
//   console.log('123')
// },3000)
// 点击事件
function Click(params:any) {
  console.log('点击了')
}



</script>
<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
